<template>
  <div
    :style="{
      backgroundImage: 'url(' + dynamicBackgroundImage + ')',
      backgroundPosition: '0% 0%',
      backgroundSize: 'cover',
    }"
    class="app-container"
  >
    <div class="logoimg"><img src="@/assets/images/logo.png" alt="" /></div>
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
      class="floor"
    >
      <el-tab-pane label="一楼信息查询" name="first">
        <div class="centerContent chuteOpening">
          <div class="item">
            <div class="box1 box" @click="handlechuteOpening">
              <img src="@/assets/images/pass.png" alt="" />
              <div class="text">滑道查询</div>
            </div>
            <div class="box2 box" @click="handleCarRelease">
              <img src="@/assets/images/carRelease.png" alt="" />
              <div class="text">笼车释放</div>
            </div>
            <!-- <div class="box2 box carRelease">
              <div class="box2Item" @click="handleCarRelease">
                <img src="@/assets/images/carRelease.png" alt="" />
                <div class="text">笼车释放</div>
              </div>
              <div class="box2Item" @click="handleCardiff">
                <img src="@/assets/images/cardiff.png" alt="" />
                <div class="text">笼车差异</div>
              </div>
            </div> -->
            <!-- <div class="boxRow2 box" @click="handleCarRelease">
              <img src="@/assets/images/carRelease.png" alt="" />
              <div class="text">笼车释放</div>
            </div> -->
            <div class="box3 box" @click="handleReplenish">
              <img src="@/assets/images/replenish.png" alt="" />
              <div class="text">补货任务</div>
            </div>
            <div class="box4 box" @click="handleVolume">
              <img src="@/assets/images/volumn.png" alt="" />
              <div class="text">拼箱体积</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="二楼信息查询" name="second"
        ><div class="centerContent">
          <div class="item">
            <div class="box1 box" @click="handleTurnOver">
              <img src="@/assets/images/24gf-box.png" alt="" />
              <div class="text">查询周转箱任务</div>
            </div>
            <div class="box2 box" @click="handleAbnormal">
              <img src="@/assets/images/error.png" alt="" />
              <div class="text">查询异常差异处理</div>
            </div>
            <div class="box3 box" @click="handleCanvasNew">
              <img src="@/assets/images/turnover.png" alt="" />
              <div class="text">查询周转箱位置</div>
            </div>

            <div class="box4 box" @click="handleInVentory">
              <img src="@/assets/images/inventorykc.png" alt="" />
              <div class="text">库存余量</div>
            </div>
            <div class="box6 box" @click="handlemultidrug">
              <img src="@/assets/images/multidrug.png" alt="" />
              <div class="text">多药投错汇总</div>
            </div>
          </div>
          <div class="item">
            <div class="boxRow1 box" @click="handleElectro">
              <img src="@/assets/images/tag.png" alt="" />
              <div class="text">异常箱处理</div>
            </div>
            <!-- <div class="boxRow5 box" @click="handlepass">
              <img src="@/assets/images/pass.png" alt="" />
              <div class="text">滑道查询</div>
            </div> -->
            <div class="boxRow2 box" @click="handleOutbound">
              <img src="@/assets/images/Deliveryck.png" alt="" />
              <div class="text">出库指令报表</div>
            </div>
            <div class="boxRow3 box" @click="handlenumberStatic">
              <img src="@/assets/images/turnover.png" alt="" />
              <div class="text">二楼线体综合报表</div>
            </div>
            <div class="boxRow4 box" @click="handleReport">
              <img src="@/assets/images/biao2.png" alt="" />
              <div class="text">仓库作业报表</div>
            </div>
          </div>
        </div></el-tab-pane
      >
      <el-tab-pane label="工作量查询" name="third">
        <div class="centerContent">
          <div class="item">
            <div class="box1 box" @click="handleworkStatic">
              <img src="@/assets/images/workStatic.png" alt="" />
              <div class="text">每日工作量统计</div>
            </div>
            <div class="box2 box" @click="handlelzBb">
              <img src="@/assets/images/biao2.png" alt="" />
              <div class="text">小Tob内复核工作量</div>
            </div>
            <div class="box3 box" @click="handleurl">
              <img src="@/assets/images/biao1.png" alt="" />
              <div class="text">查询绑箱报表</div>
            </div>
            <div class="box4 box" @click="handleCombinaTable">
              <img src="@/assets/images/dailypaper.png" alt="" />
              <div class="text">复核台任务查询</div>
            </div>
            <!-- <div class="box6 box" @click="handlemultidrug">
              <img src="@/assets/images/multidrug.png" alt="" />
              <div class="text">多药投错汇总</div>
            </div> -->
            <!-- <div class="box4 box" @click="handleDailypaper">
              <img src="@/assets/images/dailypaper.png" alt="" />
              <div class="text">日报</div>
            </div> -->
          </div>
          <div class="item">
            <div class="boxRow1 box" @click="handleDailypaper">
              <img src="@/assets/images/dailypaper.png" alt="" />
              <div class="text">工作日报</div>
            </div>
            <div class="boxRow2 box" @click="handleMarketdata">
              <img src="@/assets/images/siteSwitch.png" alt="" />
              <div class="text">小海智达数据中心-市配</div>
            </div>
            <div class="boxRow3 box" @click="handleBurstbox">
              <img src="@/assets/images/turnover.png" alt="" />
              <div class="text">爆箱品存储区</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="立库信息查询" name="fourth"
        ><div class="centerContent dataBaseThreshold">
          <div class="item">
            <div class="box1 box" @click="handlePalletExecuted">
              <img src="@/assets/images/palletExecuted.png" alt="" />
              <div class="text">托盘待执行任务查询</div>
            </div>
            <div class="box2 box" @click="handleAgvExecuted">
              <img src="@/assets/images/palletExecuted.png" alt="" />
              <div class="text">agv待执行任务查询</div>
            </div>
            <div class="box3 box" @click="handlePalletDelivery">
              <img src="@/assets/images/palletDelivery.png" alt="" />
              <div class="text">托盘出库查询</div>
            </div>
            <div class="box4 box" @click="handlePalletStorage">
              <img src="@/assets/images/palletStorage.png" alt="" />
              <div class="text">托盘入库查询</div>
            </div>
            <!-- <div class="box4 box" @click="handledataBase">
              <img src="@/assets/images/dataBaseThreshold.png" alt="" />
              <div class="text">立库阈值设置</div>
            </div> -->
            <!-- <div class="box4 box" @click="handlestation">
              <img src="@/assets/images/siteSwitch.png" alt="" />
              <div class="text">站点开关设置</div>
            </div> -->
          </div>
          <div class="item">
            <div class="boxRow1 box" @click="handleAgvTask">
              <img src="@/assets/images/tag.png" alt="" />
              <div class="text">立库WMS任务</div>
            </div>
            <div class="boxRow2 box" @click="handleDailytransport">
              <img src="@/assets/images/siteSwitch.png" alt="" />
              <div class="text">日搬运异常任务</div>
            </div>
          </div>
        </div></el-tab-pane
      >
      <el-tab-pane label="控制管理" name="fifth">
        <div class="centerContent">
          <div class="item">
            <div class="box1 box" @click="handlemulti">
              <img src="@/assets/images/split.png" alt="" />
              <div class="text">多穿巷道监测</div>
            </div>
            <div class="box2 box" @click="handledataBase">
              <img src="@/assets/images/dataBaseThreshold.png" alt="" />
              <div class="text">立库阈值设置</div>
            </div>
            <div class="box3 box" @click="handlestation">
              <img src="@/assets/images/siteSwitch.png" alt="" />
              <div class="text">站点开关设置</div>
            </div>
            <div class="box4 box" @click="handletob">
              <img src="@/assets/images/inventorykc.png" alt="" />
              <div class="text">岛与多穿设置</div>
            </div>
          </div>
          <div class="item">
            <div class="boxRow1 box" @click="handlereleaseLock">
              <img src="@/assets/images/releaselock.png" alt="" />
              <div class="text">WMS死锁查询</div>
            </div>
            <div class="boxRow2 box" @click="handleSlipManage">
              <img src="@/assets/images/pass.png" alt="" />
              <div class="text">滑道管理</div>
            </div>
            <div class="boxRow3 box" @click="handledeviceStatus">
              <img src="@/assets/images/turnover.png" alt="" />
              <div class="text">设备状态控制</div>
            </div>
            <div class="boxRow4 box" @click="handleEislock">
              <img src="@/assets/images/biao2.png" alt="" />
              <div class="text">多穿穿梭车控制</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      @close="dialogVisible = false"
    >
      <span>开发中...敬请期待！</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicBackgroundImage: require("@/assets/images/hcbanner1.jpg"),
      activeName: "second",
      // 弹窗隐藏
      dialogVisible: false,
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      console.log(tab.name);
      if (tab.name == "first") {
        this.dynamicBackgroundImage = require("@/assets/images/hcbanner1.jpg");
      } else if (tab.name == "second") {
        this.dynamicBackgroundImage = require("@/assets/images/hcbanner2.jpg");
      } else if (tab.name == "third") {
        this.dynamicBackgroundImage = require("@/assets/images/hcbanner3.jpg");
      } else if (tab.name == "fourth") {
        this.dynamicBackgroundImage = require("@/assets/images/hcbanner9.png");
      } else if (tab.name == "fifth") {
        this.dynamicBackgroundImage = require("@/assets/images/hcbanner1.jpg");
      }
    },
    handleReplenish() {
      this.$router.push("/rePlenish");
    },
    handleElectro() {
      this.$router.push("/electroTag");
    },
    handleReport() {
      this.$router.push("/reportData");
    },
    handleurl() {
      window.location.href =
        "http://10.168.40.167:18088/link.html?link=lRwesQL8h3W/dbiAKhoRt2Ngxu7fx/zaJg6BfhmiiRWimw9knf++/MbotAyUOKLOeGNcplH8nFsqxPkfujRFRw==";
    },
    handleDev() {
      this.dialogVisible = true;
    },
    // 多穿穿梭车控制
    handleEislock(){
      this.$router.push("/eisLock");
    },
    // 复核台数据查询
    handleCombinaTable() {
      this.$router.push("/combinaTable");
    },
    // wms死锁
    handlereleaseLock() {
      this.$router.push("/releaseLock");
    },
    // 日报
    handleDailypaper() {
      this.$router.push("/dailyPaper");
    },
    // 小海市配
    handleMarketdata(){
      this.$router.push("/marketData")
    },
    // 爆箱数据存取
    handleBurstbox(){
      this.$router.push("/burstBox")
    },
    // 中B
    handlenumberStatic() {
      this.$router.push("/numberStatic");
    },
    // 日搬运任务
    handleDailytransport() {
      this.$router.push("/dailytransport");
    },
    // 每日工作量统计
    handleworkStatic() {
      this.$router.push("/workloadStatic");
    },
    // 拼箱体积
    handleVolume() {
      this.$router.push("/drugVolume");
    },
    // 报表
    handlelzBb() {
      this.$router.push("/companybb");
    },
    // 岛与复核台
    handletob() {
      this.$router.push("/IslandPlatform");
    },
    // agv待执行任务
    handleAgvExecuted() {
      this.$router.push("/agvExecuted");
    },
    // 立库WMS任务
    handleAgvTask() {
      this.$router.push("/agvTask");
    },
    // 站点开关设置
    handlestation() {
      this.$router.push("/setStation");
    },
    // 滑道口查询
    handlechuteOpening() {
      this.$router.push("/chuteOpening");
    },
    // 笼车差异数据
    handleCardiff() {
      this.$router.push("/carDiff");
    },
    // 笼车释放
    handleCarRelease() {
      this.$router.push("/carRelease");
    },
    // 立库阈值查询
    handledataBase() {
      this.$router.push("/dataBaseThreshold");
    },
    // 托盘待执行任务查询
    handlePalletExecuted() {
      this.$router.push("/palletExecuted");
    },
    // 托盘出库查询
    handlePalletDelivery() {
      this.$router.push("/palletDelivery");
    },
    // 托盘入库查询
    handlePalletStorage() {
      this.$router.push("/palletStorage");
    },
    // 滑道管理
    handleSlipManage() {
      this.$router.push("/slipManage");
    },
    // IOT设备运行状态
    handledeviceStatus() {
      this.$router.push("/deviceManage");
    },
    handleAbnormal() {
      this.$router.push("/abNormal");
    },
    handleTurnOver() {
      this.$router.push("/turnOver");
    },
    handleCanvasNew() {
      this.$router.push("/CanvasNew");
      // this.$message({
      //   message: "该功能暂停使用",
      //   type: "warning",
      // });
    },
    handleInVentory() {
      this.$router.push("/InVentory");
    },
    handleOutbound() {
      this.$router.push("/Outbound");
    },
    handlepass() {
      this.$router.push("/multiCrossing");
    },
    handlemulti() {
      this.$router.push("/multiPass");
    },
    // 多药
    handlemultidrug() {
      this.$router.push("/multiDrug");
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0 !important;
  width: 100%;
  height: 100%;
  // background: url("../assets/images/backgroundhc.png") no-repeat;
  // background-color: #fdfdfd;
  overflow: hidden;
  .logoimg {
    height: 100px;
  }
  .logoimg img {
    width: 20%;
  }
  .floor {
    margin: 50px 130px;
  }
  ::v-deep .el-tabs__item.is-active {
    color: #ffffff;
  }
  .centerContent {
    height: 100%;
    display: flex;
    margin-top: 60px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .dataBaseThreshold {
    display: flex;
    height: 600px;
    align-items: center;
  }
  .chuteOpening {
    display: flex;
    height: 500px;
    align-items: center;
  }
  .item {
    display: flex;
    justify-content: flex-start;
    font-size: 14px;
    margin-bottom: 5px;
    .box1 {
      width: 300px;
      height: 300px;
      padding: 20px 0;
      background: #f19066e1;
      border-radius: 3px;
      margin-right: 5px;
      //   line-height: 300px;
      //   text-align: center;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      cursor: pointer;
      img {
        margin-top: 40px;
        width: 50%;
      }
      .text {
        height: 20px;
      }
    }
    .box2 {
      width: 295px;
      height: 300px;
      padding: 20px 0;
      background: #f7d894dc;
      border-radius: 3px;
      margin-right: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      color: #ffffff;
      cursor: pointer;
      img {
        margin-top: 40px;
        width: 44%;
      }
      .text {
        height: 20px;
      }
    }
    .carRelease {
      padding: 0;
      background: #f7d89400;
    }
    .box2 .box2Item {
      width: 100%;
      height: 49%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      border-radius: 3px;
      background: #fad88edc;
      img {
        margin-top: -10px;
        width: 30%;
      }
    }
    .box3 {
      width: 295px;
      height: 300px;
      padding: 20px 0;
      background: #778aebf0;
      border-radius: 3px;
      margin-right: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      color: #ffffff;
      cursor: pointer;
      img {
        margin-top: 40px;
        width: 45%;
      }
      .text {
        height: 20px;
      }
    }
    .box6 {
      width: 295px;
      height: 300px;
      padding: 20px 0;
      background: #78e08f;
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      color: #ffffff;
      cursor: pointer;
      img {
        margin-top: 40px;
        width: 42%;
      }
      .text {
        height: 20px;
      }
    }
    .box4 {
      width: 300px;
      height: 300px;
      padding: 20px 0;
      background: #accd7d;
      border-radius: 3px;
      margin-right: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      color: #ffffff;
      cursor: pointer;
      img {
        margin-top: 40px;
        width: 45%;
      }
      .text {
        height: 20px;
      }
    }
    .boxRow1 {
      width: 300px;
      height: 300px;
      padding: 20px 0;
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      background: #fcacffde;
      margin-right: 5px;
      color: #ffffff;
      cursor: pointer;
      img {
        margin-top: 40px;
        width: 35%;
      }
      .text {
        height: 20px;
      }
    }
    .boxRow2 {
      width: 295px;
      height: 300px;
      padding: 20px 0;
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      background: #7fd0e2;
      color: #ffffff;
      margin-right: 5px;
      cursor: pointer;
      img {
        margin-top: 20px;
        width: 50%;
      }
      .text {
        height: 20px;
      }
    }
    .boxRow3 {
      width: 300px;
      height: 300px;
      padding: 20px 0;
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      background: #74b9ff;
      color: #ffffff;
      margin-right: 5px;
      cursor: pointer;
      img {
        margin-top: 20px;
        width: 45%;
      }
      .text {
        height: 20px;
      }
    }
    .boxRow4 {
      width: 300px;
      height: 300px;
      padding: 20px 0;
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      background: #a29bfe;
      color: #ffffff;
      cursor: pointer;
      img {
        margin-top: 20px;
        width: 40%;
      }
      .text {
        height: 20px;
      }
    }
    .boxRow5 {
      width: 300px;
      height: 300px;
      padding: 20px 0;
      border-radius: 3px;
      display: flex;
      margin-right: 5px;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      background: #a29bfe;
      color: #ffffff;
      cursor: pointer;
      img {
        margin-top: 20px;
        width: 40%;
      }
      .text {
        height: 20px;
      }
    }
  }
}
</style>
